<template>
  <view class="prop-mask" v-if="show">
  	<view class="card-prop" :style="{width:width+'rpx'}">
      <view class="title">
        {{title}}
      </view>
      <view class="content">
        <slot></slot>
      </view>
      
      <view class="btn" @click="$emit('update:show', false)">
        确定
      </view>
  	</view>
  </view>
</template>

<script>
  export default {
    name:"Tip",
    props:{
    	title:{
    		type:String,
    		default:'提示'
    	},
    	width:{
    		type:Number,
    		default:640
    	},
    	show:{
    		type:Boolean,
    		default:false
    	},
    	// closeIcon:{
    	// 	type:Boolean,
    	// 	default:true
    	// }
    },
    data() {
      return {
        
      };
    },
  }
</script>

<style lang="scss" scoped>
	.prop-mask{
		height: calc(100vh);
		width: calc(100vw);
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.card-prop{
		background-color: $uni-bg-color;
		border-radius: 24rpx;
    padding: 40upx;
    position: relative;
    padding-bottom: 100upx;
    max-height: 80vh;
    overflow: hidden;
		.title{
			// margin: 0 20rpx;
			// // border-bottom: 3rpx solid rgba($color: #d4d4d4, $alpha: .7);
			// height: 100rpx;
			// justify-content: space-between;
			// align-items: center;
			// color: $text-color-card-title;
			// font-size: 34rpx;
      
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32upx;
      color: #000000;
      text-align: center;
      margin-bottom: 32upx;
		}
    .content {
      max-height: calc(80vh - 110px);
      overflow-y: auto;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28upx;
      color: rgba(0,0,0,0.7);
      line-height: 56upx;
    }
    .btn {
      width: 100%;
      height: 88upx;
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      line-height: 88upx;
      color: #3E81F7;
      background-color: #FFF;
      border-top: 1px solid rgba(0,0,0,0.12);
    }
		.divider{
			margin: 0 20rpx;
			background-color: #d4d4d4;
			height: 2rpx;
		}
	}
</style>